<script setup lang="ts">
import { ref, computed, reactive, onMounted, defineProps, watch } from "vue";
import { message, Modal } from "ant-design-vue";
import htmlCode from "./htmlCode.md?raw";
import styleCode from "./styleCode.md?raw";
import tsCode from "./tsCode.md?raw";
const online_pop = ref(false);
type Key = string | number;
let selectedRowKeys = ref<Key[]>([]);
const countAll = ref(0);
const tableScroll = ref({
  y: 0,
});
let selectedKeys: any = ref([]);
const tableData: any = ref([]);
const loading = ref(false);

const columns = computed(() => {
  const columns = [
    {
      title: "全选",
      dataIndex: "indexbox",
      width: 80,
    },
    {
      title: "状态",
      dataIndex: "status",
    },
    {
      title: "名称",
      dataIndex: "name",
    },
    {
      title: "年龄",
      dataIndex: "age",
    },
    {
      title: "类型",
      dataIndex: "type",
    },
    {
      title: "地址",
      dataIndex: "address",
    },
    {
      title: "操作",
      dataIndex: "operation",
      width: 180,
    },
  ];
  return columns;
});

let pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showTotal: () => {
    return `共${pagination.total}条数据`;
  },
});

const table_main = ref();
onMounted(() => {
  const tableH = table_main.value.offsetHeight - 165;
  console.log(tableH);

  tableScroll.value.y = tableH;
});
const pageChange = (pageNumber: number, size: number) => {
  console.log(pageNumber, size);
  // pagination.current = pageNumber
  console.log(pagination);
  if (pagination.current != pageNumber) {
    pagination.pageSize = size;
    pagination.current = pageNumber;
    if (pageNumber == 2) {
      tableData.value = [
        {
          key: 3,
          name: "王五",
          age: 35,
          address: "地址3",
          status: 2,
          type: 2,
        },
        {
          key: 4,
          name: "羊九",
          age: 67,
          address: "地址1",
          status: 3,
          type: 1,
        },
        {
          key: 5,
          name: "刘十一",
          age: 32,
          address: "地址1",
          status: 4,
          type: 1,
        },
        {
          key: 6,
          name: "邓八",
          age: 32,
          address: "地址4",
          status: 0,
          type: 1,
        },
        {
          key: 7,
          name: "赵六",
          age: 32,
          address: "地址1",
          status: 0,
          type: 2,
        },
        {
          key: 8,
          name: "田七",
          age: 23,
          address: "地址1",
          status: 1,
          type: 3,
        },
        {
          key: 9,
          name: "王五",
          age: 35,
          address: "地址3",
          status: 2,
          type: 2,
        },
        {
          key: 10,
          name: "羊九",
          age: 67,
          address: "地址1",
          status: 3,
          type: 1,
        },
      ];
    } else {
      tableData.value = [
        {
          key: 1,
          name: "张三",
          age: 32,
          address: "地址1",
          status: 0,
          type: 1,
        },
        {
          key: 2,
          name: "李四",
          age: 28,
          address: "地址2",
          status: 1,
          type: 1,
        },
        {
          key: 3,
          name: "王五",
          age: 35,
          address: "地址3",
          status: 2,
          type: 2,
        },
        {
          key: 4,
          name: "羊九",
          age: 67,
          address: "地址1",
          status: 3,
          type: 1,
        },
        {
          key: 5,
          name: "刘十一",
          age: 32,
          address: "地址1",
          status: 4,
          type: 1,
        },
        {
          key: 6,
          name: "邓八",
          age: 32,
          address: "地址4",
          status: 0,
          type: 2,
        },
        {
          key: 7,
          name: "赵六",
          age: 32,
          address: "地址1",
          status: 0,
          type: 3,
        },
        {
          key: 8,
          name: "田七",
          age: 23,
          address: "地址1",
          status: 1,
          type: 4,
        },
        {
          key: 9,
          name: "王五",
          age: 35,
          address: "地址3",
          status: 2,
          type: 2,
        },
        {
          key: 10,
          name: "羊九",
          age: 67,
          address: "地址1",
          status: 3,
          type: 1,
        },
      ];
    }
  }
  if (pagination.pageSize != size) {
    pagination.pageSize = size;
    pagination.current = 1;
    if (pagination.pageSize > 10) {
      tableData.value = [
        {
          key: 1,
          name: "张三",
          age: 32,
          address: "地址1",
          status: 0,
          type: 3,
        },
        {
          key: 2,
          name: "李四",
          age: 28,
          address: "地址2",
          status: 1,
          type: 1,
        },
        {
          key: 3,
          name: "王五",
          age: 35,
          address: "地址3",
          status: 2,
          type: 2,
        },
        {
          key: 4,
          name: "羊九",
          age: 67,
          address: "地址1",
          status: 3,
          type: 1,
        },
        {
          key: 5,
          name: "刘十一",
          age: 32,
          address: "地址1",
          status: 4,
          type: 1,
        },
        {
          key: 6,
          name: "邓八",
          age: 32,
          address: "地址4",
          status: 0,
          type: 4,
        },
        {
          key: 7,
          name: "赵六",
          age: 32,
          address: "地址1",
          status: 0,
          type: 5,
        },
        {
          key: 8,
          name: "田七",
          age: 23,
          address: "地址1",
          status: 1,
          type: 1,
        },
        {
          key: 9,
          name: "王五",
          age: 35,
          address: "地址3",
          status: 2,
          type: 2,
        },
        {
          key: 10,
          name: "羊九",
          age: 67,
          address: "地址1",
          status: 3,
          type: 1,
        },
        {
          key: 3,
          name: "王五",
          age: 35,
          address: "地址3",
          status: 2,
          type: 2,
        },
        {
          key: 4,
          name: "羊九",
          age: 67,
          address: "地址1",
          status: 3,
          type: 1,
        },
        {
          key: 5,
          name: "刘十一",
          age: 32,
          address: "地址1",
          status: 4,
          type: 1,
        },
        {
          key: 6,
          name: "邓八",
          age: 32,
          address: "地址4",
          status: 0,
          type: 2,
        },
        {
          key: 7,
          name: "赵六",
          age: 32,
          address: "地址1",
          status: 0,
          type: 2,
        },
        {
          key: 8,
          name: "田七",
          age: 23,
          address: "地址1",
          status: 1,
          type: 4,
        },
        {
          key: 9,
          name: "王五",
          age: 35,
          address: "地址3",
          status: 2,
          type: 2,
        },
        {
          key: 10,
          name: "羊九",
          age: 67,
          address: "地址1",
          status: 3,
          type: 1,
        },
      ];
    } else {
      tableData.value = [
        {
          key: 1,
          name: "张三",
          age: 32,
          address: "地址1",
          status: 0,
          type: 1,
        },
        {
          key: 2,
          name: "李四",
          age: 28,
          address: "地址2",
          status: 1,
          type: 1,
        },
        {
          key: 3,
          name: "王五",
          age: 35,
          address: "地址3",
          status: 2,
          type: 2,
        },
        {
          key: 4,
          name: "羊九",
          age: 67,
          address: "地址1",
          status: 3,
          type: 1,
        },
        {
          key: 5,
          name: "刘十一",
          age: 32,
          address: "地址1",
          status: 4,
          type: 1,
        },
        {
          key: 6,
          name: "邓八",
          age: 32,
          address: "地址4",
          status: 0,
          type: 2,
        },
        {
          key: 7,
          name: "赵六",
          age: 32,
          address: "地址1",
          status: 0,
          type: 3,
        },
        {
          key: 8,
          name: "田七",
          age: 23,
          address: "地址1",
          status: 1,
          type: 4,
        },
        {
          key: 9,
          name: "王五",
          age: 35,
          address: "地址3",
          status: 2,
          type: 2,
        },
        {
          key: 10,
          name: "羊九",
          age: 67,
          address: "地址1",
          status: 3,
          type: 1,
        },
      ];
    }
  }
  selectedRowKeys.value = [];
  // getList();
};
const getList = () => {
  tableData.value = [
    {
      key: 1,
      name: "张三",
      age: 32,
      address: "地址1",
      status: 0,
      type: 1,
    },
    {
      key: 2,
      name: "李四",
      age: 28,
      address: "地址2",
      status: 1,
      type: 2,
    },
    {
      key: 3,
      name: "王五",
      age: 35,
      address: "地址3",
      status: 2,
      type: 3,
    },
    {
      key: 4,
      name: "羊九",
      age: 67,
      address: "地址1",
      status: 3,
      type: 4,
    },
    {
      key: 5,
      name: "刘十一",
      age: 32,
      address: "地址1",
      status: 4,
      type: 5,
    },
    {
      key: 6,
      name: "邓八",
      age: 32,
      address: "地址4",
      status: 0,
      type: 1,
    },
    {
      key: 7,
      name: "赵六",
      age: 32,
      address: "地址1",
      status: 0,
      type: 2,
    },
    {
      key: 8,
      name: "田七",
      age: 23,
      address: "地址1",
      status: 1,
      type: 3,
    },
    {
      key: 9,
      name: "王五",
      age: 35,
      address: "地址3",
      status: 2,
      type: 2,
    },
    {
      key: 10,
      name: "羊九",
      age: 67,
      address: "地址1",
      status: 3,
      type: 1,
    },
  ];
  pagination.total = 18;
};
//选择项改变
const onSelectChange = (selectedRowKeyss: Key[]) => {
  console.log(selectedRowKeyss, selectedRowKeys);
  selectedRowKeys.value = selectedRowKeyss;
};
const addUserPopup = ref(false);
// 新增
const handleNew = () => {
  userid.value = "";
  addUserPopup.value = true;
};
const editPop = ref(false);
const userid = ref("");
const userName = ref("");
const visibleRes = ref(false);
const selectedname = ref("");
//批量删除
const handleBatchDel = () => {
  if (selectedRowKeys.value.length != 0) {
    let ids = selectedRowKeys.value.join(",");
    handleDel(ids);
  } else {
    message.info("请选择要删除的数据");
  }
};

const handleDel = (item: any) => {
  Modal.confirm({
    title: "提示",
    centered: true,
    content: "确定删除选中的数据么？",
    okText: "确认",
    cancelText: "取消",
    onOk: () => {
      //删除用户
    },
  });
};
const userOnlineClick = (item: any) => {
  userid.value = item.id;
  online_pop.value = true;
};
onMounted(() => {
  getList();
});
const onSelect = (val: any, e: any) => {
  console.log(val, e);
  selectedname.value = e.node.name;
};
const handleExport = (e: any) => {
  if (e.key == 1) {
    message.info("导出选中行");
  } else if (e.key == 2) {
    message.info("导出当前页");
  } else if (e.key == 3) {
    message.info("导出全部");
  }
};
const imgsrc1 = ref(
  "https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg"
);
let islook1 = ref(false);
const lookCode1 = () => {
  islook1.value = !islook1.value;
  if (islook1.value) {
    imgsrc1.value =
      "https://gw.alipayobjects.com/zos/antfincdn/4zAaozCvUH/unexpand.svg";
  } else {
    imgsrc1.value =
      "https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg";
  }
};
const imgsrc2 = ref(
  "https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg"
);
let islook2 = ref(false);
const lookCode2 = () => {
  islook2.value = !islook2.value;
  if (islook2.value) {
    imgsrc2.value =
      "https://gw.alipayobjects.com/zos/antfincdn/4zAaozCvUH/unexpand.svg";
  } else {
    imgsrc2.value =
      "https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg";
  }
};
const imgsrc3 = ref(
  "https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg"
);
let islook3 = ref(false);
const lookCode3 = () => {
  islook3.value = !islook3.value;
  if (islook3.value) {
    imgsrc3.value =
      "https://gw.alipayobjects.com/zos/antfincdn/4zAaozCvUH/unexpand.svg";
  } else {
    imgsrc3.value =
      "https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg";
  }
};
</script>

<template>
  <div class="code-box">
    <div class="public-flex-box">
      <div class="public-title-bold">表格模板</div>
      <div class="table-box" ref="table_main">
        <div class="content-main">
          <div class="table-operations">
            <div class="left">
              <div>
                <span>已选择：</span>
                <span class="font-num">{{ selectedRowKeys.length }}条</span>
              </div>
              <div class="total-num">
                <span>共计：</span>
                <span>{{ countAll }}</span>
                <span>条数据</span>
              </div>
            </div>
            <div class="right">
              <a-button class="btn" @click="handleBatchDel">
                <i class="iconfont icon-piliangshanchu"></i>批量删除
              </a-button>
              <a-dropdown>
                <template #overlay>
                  <a-menu @click="handleExport">
                    <a-menu-item key="1"> 导出选中行 </a-menu-item>
                    <a-menu-item key="2"> 导出当前页 </a-menu-item>
                    <a-menu-item key="3"> 导出全部 </a-menu-item>
                  </a-menu></template
                >
                <a-button class="btn">
                  导出 <i class="iconfont icon-xia"></i>
                </a-button>
              </a-dropdown>
            </div>
          </div>
          <div class="table-main">
            <a-table
              bordered
              style="height: 100%"
              rowKey="key"
              :loading="loading"
              :columns="columns"
              :data-source="tableData"
              :pagination="false"
              :scroll="tableScroll"
              :row-selection="{
                selectedRowKeys: selectedRowKeys,
                onChange: onSelectChange,
              }"
            >
              <!-- 操作按钮 -->
              <template #bodyCell="{ column, record, index }">
                <template v-if="column.dataIndex == 'indexbox'">
                  <p class="table-row-btn">
                    {{ index + 1 }}
                  </p>
                </template>
                <template v-if="column.dataIndex == 'status'">
                  <p v-if="record.status == 0" class="status-box">
                    <span class="ststus-green"></span>
                    成功
                  </p>
                  <p v-if="record.status == 1" class="status-box">
                    <span class="ststus-red"></span>
                    危险
                  </p>
                  <p v-if="record.status == 2" class="status-box">
                    <span class="ststus-orange"></span>
                    警告
                  </p>
                  <p v-if="record.status == 3" class="status-box">
                    <span class="ststus-grey"></span>
                    失败
                  </p>
                  <p v-if="record.status == 4" class="status-box">
                    <span class="ststus-blue"></span>
                    正常
                  </p>
                </template>
                <template v-if="column.dataIndex === 'operation'">
                  <p class="table-row-btn">
                    <!-- <a class="a-btn-blue" @click="handleDel(record)">删除</a> -->
                    <a class="a-btn-blue">详情</a>
                    <a class="a-btn-blue">编辑</a>
                    <a-popover>
                      <template #content>
                        <div class="pop-box">
                          <p><a class="a-btn-blue">修改资源</a></p>
                          <p><a class="a-btn-blue">删除</a></p>
                          <p><a class="a-btn-blue">审核</a></p>
                        </div>
                      </template>
                      <a class="a-btn-blue"
                        >更多<i class="iconfont icon-xia"></i
                      ></a>
                    </a-popover>
                  </p>
                </template>

                <template v-if="column.dataIndex == 'type'">
                  <div v-if="record.type == 1" class="type-box">
                    <div class="type-item type-green">
                      <i class="iconfont icon-shigongzhong"></i>
                      <span>绿色</span>
                    </div>
                  </div>
                  <div v-if="record.type == 2" class="type-box">
                    <div class="type-item type-red">
                      <i class="iconfont icon-shigongzhong"></i>
                      <span>红色</span>
                    </div>
                  </div>
                  <div v-if="record.type == 3" class="type-box">
                    <div class="type-item type-yellow">
                      <i class="iconfont icon-shigongzhong"></i>
                      <span>黄色</span>
                    </div>
                  </div>
                  <div v-if="record.type == 4" class="type-box">
                    <div class="type-item type-gray">
                      <i class="iconfont icon-shigongzhong"></i>
                      <span>灰色</span>
                    </div>
                  </div>
                  <div v-if="record.type == 5" class="type-box">
                    <div class="type-item type-blue">
                      <i class="iconfont icon-shigongzhong"></i>
                      <span>蓝色</span>
                    </div>
                  </div>
                </template>
                <template v-if="column.key == 'status'">
                  <div v-if="record.status == 1" class="status-box">
                    <a-popover>
                      <template #content>
                        <span style="color: #fff"> 查看详情</span>
                      </template>
                      <div><span class="green-round"></span>在线</div>
                    </a-popover>
                  </div>
                  <div v-else class="rowspan-box">
                    <a-popover>
                      <template #content>
                        <span style="color: #fff"> 查看详情</span>
                      </template>
                      <div><span class="grey-round"></span>离线</div>
                    </a-popover>
                  </div>
                </template>
              </template>
            </a-table>
          </div>
          <div class="table-pager">
            <a-pagination
              show-quick-jumper
              show-size-changer
              :total="pagination.total"
              :current="pagination.current"
              :show-total="pagination.showTotal"
              @change="pageChange"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="public-outside-title">代码展示</div>
    <div class="public-flex-box">
      <div class="public-code-icon">
        <div class="public-title-bold">Html</div>
        <img :src="imgsrc1" @click="lookCode1" al t="" />
      </div>
      <div class="public-code-con" v-if="islook1">
        <v-md-preview
          :text="htmlCode"
          preview-class="vuepress-markdown-body"
        ></v-md-preview>
      </div>
    </div>
    
    <div class="public-flex-box">
      <div class="public-code-icon">
        <div class="public-title-bold">css</div>
        <img :src="imgsrc2" @click="lookCode2" al t="" />
      </div>
      <div class="public-code-con" v-if="islook2">
        <v-md-preview
          :text="styleCode"
          preview-class="vuepress-markdown-body"
        ></v-md-preview>
      </div>
    </div>
    <div class="public-flex-box">
      <div class="public-code-icon">
        <div class="public-title-bold">typeScript</div>
      <img :src="imgsrc3" @click="lookCode3" al t="" />
    </div>
    <div class="public-code-con" v-if="islook3">
      <v-md-preview
        :text="tsCode"
        preview-class="vuepress-markdown-body"
      ></v-md-preview>
    </div>
    </div>
   
  </div>
</template>

<style lang="scss" scoped>
.code-box {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.table-box {
  height: 500px;
  width: 100%;
  .content-main {
    border: 1px solid #dddddd;
    .table-operations {
      /* margin-bottom: 20px; */
      display: flex;
      justify-content: space-between;
      align-items: center;
      /* padding-bottom: 10px; */
      border-bottom: 1px solid rgba(221, 221, 221, 1);
      height: 52px;
      padding: 0px 15px;
      background-color: #fff;

      .left {
        display: flex;
        font-size: 16px;
        font-weight: bold;
        opacity: 0.85;
      }

      .right {
        display: flex;
        opacity: 0.65;
        align-items: center;

        .table-tool {
          width: 200px;

          ::v-deep .ant-select {
            width: 100%;
          }
        }

        .btn {
          min-width: 88px;
          margin-left: 10px;
        }
      }
    }
    .table-main {
      height: calc(100% - 65px);

      /* border: 1px solid rgba(255, 255, 255, 0.2); */
      .status-box {
        display: flex;
        align-items: center;

        span {
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          margin-right: 8px;
        }

        .ststus-green {
          background-color: rgba(82, 196, 26, 1);
        }

        .ststus-red {
          background-color: #f5222d;
        }

        .ststus-orange {
          background-color: #fa8c16;
        }

        .ststus-grey {
          background-color: rgba(0, 0, 0, 0.45);
        }

        .ststus-blue {
          background-color: #1677ff;
        }
      }
      .type-box {
        display: flex;
        align-items: center;
        .type-item {
          display: flex;
          min-width: 88px;
          height: 32px;
          line-height: 32px;
          justify-content: space-between;
          align-items: center;
          padding: 0px 5px;
          i {
            width: 22px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            color: #fff;
            border-radius: 4px;
          }
          span {
            display: inline-block;
            width: calc(100% - 22px);
            text-align: center;
          }
        }
        .type-green {
          background-color: #efffdf;
          color: #52c41a;

          i {
            background: #52c41a;
          }
        }
        .type-red {
          background-color: #fff1f0;
          color: #ff4d4f;

          i {
            background: #ff4d4f;
          }
        }
        .type-blue {
          background-color: #e6f4ff;
          color: #1677ff;

          i {
            background: #1677ff;
          }
        }
        .type-yellow {
          background-color: #fff6e3;
          color: #fa8c16;

          i {
            background: #fa8c16;
          }
        }
        .type-gray {
          background-color: #f5f5f5;
          color: rgba(0, 0, 0, 0.65);

          i {
            background: rgba(0, 0, 0, 0.65);
          }
        }
      }
      .table-row-btn {
        margin-bottom: 0;

        a {
          &:first-child {
            margin: 0;
          }

          /* width: 68px; */
          margin-left: 20px;
        }

        .a-btn-blue {
          color: #1677ff;
          .icon-xia {
            margin-left: 3px;
            font-size: 14px;
          }
        }

        .a-btn-orange {
          color: #fa8c16;
        }

        .a-btn-red {
          color: #f5222d;
        }

        .a-btn-green {
          color: rgba(82, 196, 26, 1);
        }

        .a-btn-disabled {
          cursor: not-allowed;
          color: rgba(0, 0, 0, 0.25);
        }
      }

      .rowspan-box {
        display: flex;
        align-items: center;
        .green-round {
          display: inline-block;
          margin-right: 5px;
          background: green;
          width: 5px;
          height: 5px;
          border-radius: 50%;
        }
        .grey-round {
          margin-right: 5px;
          display: inline-block;
          background: grey;
          width: 5px;
          height: 5px;
          border-radius: 50%;
        }
      }
    }
  }

  /* 表格行操作按钮 */

  ::v-deep input::placeholder {
    color: rgba(255, 255, 255, 1);
  }

  ::v-deep .ant-table-tbody tr:nth-child(2n) {
    background-color: #fafafa;
  }

  ::v-deep .ant-table-tbody > tr > td {
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #dddddd !important;
  }

  ::v-deep table > thead > tr > th {
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #dddddd !important;
  }
}

/* 覆盖原生分页样式 */
::v-deep .table-pager {
  border-top: 1px solid #dddddd;

  .ant-pagination {
    text-align: right;
    padding: 0 20px;
    line-height: 52px;

    .ant-pagination-options-quick-jumper {
      line-height: 52px;
      height: 52px;
    }
  }
}

::v-deep .ant-btn:hover {
  color: #1677ff;
  border-color: #1677ff;
}

::v-deep .ant-pagination-total-text {
  letter-spacing: 3px;
}

::v-deep .ant-pagination-item-active a {
  color: #fff;
}

::v-deep .ant-pagination-item-active {
  color: #fff;
  background: #1677ff;
  border: 1px solid #1677ff;
}

::v-deep .ant-pagination-item-active:hover a {
  color: #fff;
  background: #1677ff;
  border-color: #1677ff;
}
::v-deep .ant-dropdown-menu-item:hover {
  color: #1677ff;
  background: #e6f4ff;
}
</style>
<style lang="scss">
.ant-popover-inner-content {
  padding: 5px !important;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  .pop-box {
    p {
      padding: 0px 20px;
      height: 32px;
      line-height: 32px;
      border-radius: 4px;
    }
    p:hover {
      color: #1677ff;
      background: #e6f4ff;
    }
  }
}
</style>
